<template>
    <div class="box">
        <vue-particles
            color="#a5a6aa"
            :particleOpacity="0.7"
            :particlesNumber="80"
            shapeType="circle"
            :particleSize="4"
            linesColor="#dedede"
            :linesWidth="1"
            :lineLinked="true"
            :lineOpacity="0.4"
            :linesDistance="150"
            :moveSpeed="3"
            :hoverEffect="true"
            hoverMode="grab"
            :clickEffect="true"
            clickMode="push"
        ></vue-particles>
        <!-- 表单区域 -->
        <el-form :model="form" status-icon :rules="rules" ref="form" class="demo-ruleForm">
            <el-form-item>
                <p class="title">优点达资讯平台</p>
            </el-form-item>

            <el-form-item prop="username">
                <el-input type v-model="form.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type v-model="form.password" placeholder="请输入密码"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button @click="onSubmit">立即登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import Vue from "vue";
import VueParticles from "vue-particles";
Vue.use(VueParticles);
export default {
    data() {
        return {
            token: "",
            form: {
                username: "admin",
                password: "admin888",
            },
            rules: {
                username: [
                    {
                        required: true,
                        message: "请输入用户名",
                        triggle: "blur",
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "请输入用户名",
                        triggle: "blur",
                    },
                ],
            },
        };
    },
    methods: {
        onSubmit() {
            this.$refs.form.validate(async (valid) => {
                if (!valid) return;
                let { data: res } = await this.$axios.post(
                    "api/login",
                    this.form
                );
                console.log(res);
                if (res.code !== 200) return this.$message.error(res.msg);
                localStorage.setItem("userinfo", JSON.stringify(res.data));
                this.$router.push("/home");
            });
        },
    },
};
</script>
<style scoped>
#particles-js {
    background-color: #040618;
    height: 100vh;
    width: 100vw;
    position: absolute;
    z-index: -1;
}

.el-form {
    background-color: #fff;
    width: 440px;
    height: 335px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.el-form-item {
    width: 80%;
}
.el-button {
    width: 100%;
    background-color: #fb6d49 !important;
    color: #fff;
}
.title {
    color: #fb6d49;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 10px;
}
</style>
